<template>
  <AppDialogForm
    title="修改地址"
    :confirm="handleSubmit"
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="loading"
    >
      <el-form-item label="省市区/县" prop="address1">
        <el-cascader
          v-model="formData.address1"
          :options="cityData"
          :props="cityProps"
          @change="cityChange"
          clearable
        ></el-cascader>
      </el-form-item>

      <el-form-item label="详细地址" prop="address2">
        <el-input type="textarea" v-model="formData.address2" :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
      </el-form-item>
    </el-form>
  </AppDialogForm>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import cityData from "./cityData.js";

const props = defineProps({

});
const emit = defineEmits(["success"]);
const form = ref(null);
const loading = ref(false);
const formData = ref({
  address1: [],
  address2: "",
});
const formRules = {
  address1: [{ required: true, message: "请选择省市区县", trigger: "change" }],
  address2: [{ required: true, message: "请输入详细地址", trigger: "blur" }]
};
const cityProps = {  //指定级联选择器的配置对象
  expandTrigger: 'hover',
  value: 'value',
  label: 'label',
  children: 'children'
}

const handleDialogOpen = () => {
  
};

const handleSubmit = async () => {
  const valid = await form.value.validate();
  if (!valid) {
    return;
  }

};

const handleDialogClosed = () => {
  form.value.clearValidate(); // 清除验证结果
  form.value.resetFields(); // 清除表单数据
  formData.value = {
    address1: [],
    address2: "",
  };
};

</script>

<style lang="scss" scoped>

</style>
